<template>
	<view class="content">
		<image  class="bg" src="https://www.dingxians.cn/upload/20230831/b.gif"></image>
		<view class="tabbar">
			<view class="tabbar_left">
				<image mode="widthFix" @click="header('/pages/user/back_card',1,true)" src="https://www.dingxians.cn/upload/20231009/6523f2373710a.png" class="tool"></image>
				<image mode="widthFix" @click="getWeixin()" src="https://www.dingxians.cn/upload/20231009/6523f24f97300.png" class="tool"></image>
				<image mode="widthFix" @click="getCouponPanel()" src="https://www.dingxians.cn/upload/20231009/6523f25a0408e.png" class="tool"></image>
			</view>
			<view class="tabbar_right">
<!--				<image mode="widthFix" @click="playRule()" src="https://www.dingxians.cn/upload/images/box/play.png" class="play"></image>-->
				<image mode="widthFix" v-if="audioStatus" @click="playAuto()" src="https://www.dingxians.cn/upload/20230911/64fe206b0e445.png" class="back"></image>
				<image mode="widthFix" v-else @click="playAuto()" src="https://www.dingxians.cn/upload/20230911/64fe20bf5880a.png" class="back"></image>
			</view>
		</view>
		
		<view class="box">
			<image @click.stop="changeLeft()" mode="widthFix" src="https://www.dingxians.cn/upload/20231009/6523fdfcc4646.png" class="left"></image>
			<image @click.stop="changeRight()" mode="widthFix" src="https://www.dingxians.cn/upload/20231010/6524a057cc1ee.png" class="right"></image>
			<swiper :current="current" circular="true" :autoplay="autoplay"  :interval="interval" :duration="duration" @change="changeBox" class="swiper" v-if="blindBoxData.length">
				<swiper-item @click="detail()" class="swiper_item" v-for="(item,index) in blindBoxData" :key="item.id">
					<image mode="heightFix" class="swiper_image" :src="item.image"></image>
					<!-- <view class="boo">
						<image class="prize_image" :src="item.image"></image>
					</view> -->
				</swiper-item>
			</swiper>
			<!-- <image mode="widthFix" src="https://www.dingxians.cn/upload/20231011/65267ffa4c591.png" class="try_play"></image> -->
		</view>
	
		<view class="prize_box">
			<view class="box_prize">
				<view class="box_prize_icon">￥</view>
				<view class="box_prize_num">{{goods_price}}</view>
			</view>
		</view>
		
		<view class="box2">
			<swiper  previous-margin="250rpx" next-margin="250rpx" :current="current" circular="true" :autoplay="autoplay"  :interval="interval" :duration="duration" @change="changeBox" class="swiper" v-if="blindBoxData.length">
				<swiper-item @click="selectBox(index)" class="swiper_item" v-for="(item,index) in blindBoxData" :key="item.id">
					<view class="swiper_item_box" :class="index == current ? 'active' : ''">
						<image v-if="index == current" class="swiper_item_box_bg" src="https://www.dingxians.cn/upload/20230914/6502b5364e3c3.png"></image>
						<image v-else class="swiper_item_box_bg" src="https://www.dingxians.cn/upload/20230914/6502b55993283.png"></image>
						<image mode="widthFix" class="swiper_image" :src="item.thumb"></image>
						<view class="swiper_item_name">{{item.name}}</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="open_box">
			<image @click="header('/pages/activity/task')" class="open_image" mode="heightFix" src="https://www.dingxians.cn/upload/20230910/64fda07a98167.png"></image>
			<image @click="detail()" class="open_image" mode="heightFix" src="https://www.dingxians.cn/upload/20230910/64fda068d0cd1.png"></image>
		</view>
		
		
		<!-- 强更弹窗 -->
		<uni-popup class="app_popup" v-show="showVersion"  mode="center" ref="update_app" :mask-click="false">
			<view class="pop_box">
				<image class="pop_bg" mode="widthFix" src="https://www.dingxians.cn/upload/20230830/64eeb4f594a71.png"></image>
				<view class="pop_version">
					<view class="pop_header">发现新版本 {{versionData.version_no}}</view>
					<text class="pop_content">{{versionData.content}}</text>
				</view>
				<view class="rate" v-if="downStatus">
					<view class="rate_image">
						<liu-progressbar :bgColor="'#A361F6'" :progress="percentVal" dsColor="#ccc" color="#FFFFFF" :height="'15rpx'" />
					</view>
					<view class="rate_value">{{percentVal}}%</view>
				</view>
				<view class="down_btn_group" v-else>
					<!-- <view class="down_btn cancel" @click="cancel()">取消</view> -->
					<view class="down_btn down" @click="updateApp()">更新</view>
				</view>
			</view>
		</uni-popup>
	
	
		<!-- 领取优惠券弹窗 -->
		<uni-popup class="coupon_popup" v-show="couponPopStatus" ref="coupon_popup" :mask-click="true">
			<view class="coupon_popup_box">
				<image mode="widthFix"  class="pop_image" src="https://www.dingxians.cn/upload/20230831/64f032e3505c1.png"></image>
				<image class="close_pop" @click.stop="closeCouponPop()"  src="https://www.dingxians.cn/upload/20230831/64f048f71f941.png"></image>
				<view class="coupon_popup_header">
					<image mode="heightFix" class="coupon_popup_header_icon" src="https://www.dingxians.cn/upload/20230831/64f04e108d4a5.png"></image>
					<view class="coupon_popup_header_title">
						<uni-countdown :show-day="false" :hour="couponPopData.l_h" :minute="couponPopData.l_i" :second="couponPopData.l_s" />
						<view class="coupon_popup_header_remark">后不可领取</view>
					</view> 
				</view>
				<view class="coupon_popup_content">
					<view class="coupon_popup_item" v-for="item in couponPopData.data" :key="item.id">
						<image class="coupon_popup_item_bg" src="https://www.dingxians.cn/upload/20230831/64f04af061345.png"></image>
						<view class="coupon_popup_left">
							<view class="coupon_popup_name">{{item.name}}</view>
							<view class="coupon_popup_remark">{{item.remark}}</view>
						</view>
						<view class="coupon_popup_right">
							<view class="coupon_popup_amount_box">
								<view>￥</view>
								<view class="coupon_popup_amount">{{item.amount}}</view>
							</view>
							<view class="coupon_popup_min_amount" v-if="item.min_amount">满{{item.min_amount}}可用</view>
							<view class="coupon_popup_min_amount" v-else>无门槛</view>
						</view>
					</view>
				</view>
				
				<image v-if="couponPopData.status" @click="receiveCoupon()" mode="widthFix" class="coupon_btn" src="https://www.dingxians.cn/upload/20230831/64f063623c21d.png"></image>
				<image v-else @click="closeCouponPop()" mode="widthFix" class="coupon_btn" src="https://www.dingxians.cn/upload/20230831/64f059b163ef2.png"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import api from '../../api/index.js'
	export default {
		data() {
			return {
				blindBoxData:[],
				autoplay:false,
				interval:1000,
				duration:500,
				current:0,
				goods_price:0,
				audio:null,
				audioStatus:true,
				box_id:'',
				
				showVersion:false,
				percentVal:0,
				versionData:{},
				mask:true,
				downStatus:false,
				version_no:'',
				
				networkTimer:null,
				network_flag:false,
				totalBox:0,// 总数量
				couponPopStatus:false,
				couponPopData:[]
			}
		},
		onLoad(option) {
			uni.showLoading({
				title:'数据加载中'
			})
			this.audio = uni.createInnerAudioContext();
			// this.audio.autoplay = true;
			// this.audio.loop = true  // 是否循环播放
			this.audio.sessionCategory = 'ambient'
		},
		onShow(){
			this.version_flag = false;
			this.box_flag = false;
			this.percentVal = 0;
			this.showVersion = false;
			this.mask = true;
			this.downStatus = false;
			
			this.networkTimer = setInterval(() => {
				if (this.network_flag) {
					clearInterval(this.networkTimer)
					this.audio.src = 'https://www.dingxians.cn/app/bgm.m4a';
				}
				this.getBox()
				this.getVersion();
			},500)
		},
		
		methods: {
			getWeixin(){
				let wechat = null
				plus.share.getServices(res => {
				 wechat = res.find(i => i.id === 'weixin')
					if (wechat) {
						wechat.openCustomerServiceChat({
							corpid: 'ww174d29d617d2136a',//企业ID
							url: 'https://work.weixin.qq.com/kfid/kfcf40b036d744bf748',//客服地址
						}, src => {
							console.log("success:")
						}, err => {
							console.log("error:")
						})
					} else {
						uni.showToast({
							title: '当前环境不支持微信操作',icon:"error"
						});
					}
				});
			},
			closeCouponPop(){
				this.$refs.coupon_popup.close();
				this.couponPopStatus = false;
			},
			getCouponPanel(){
				api.couponPanels.index().then(res => {
					if (res.code === 200) {
						this.couponPopData = res.data;
						this.couponPopStatus = true;
						this.$refs.coupon_popup.open('center')
					}
				}).catch(error => {
					console.log(error)
				})
			},
			receiveCoupon(){
				api.couponPanels.store().then(res => {
					if (res.code === 200) {
						this.show(res.msg)
						this.closeCouponPop();
					}
				}).catch(error => {
					console.log(error)
				})
			},
			changeLeft(){
				this.current = this.current == 0 ? this.totalBox : this.current - 1;
			},
			changeRight(){
				this.current = this.current == this.totalBox ? 0 : this.current + 1;
			},
			selectBox(current){
				this.current = current
			},
			playRule(){
				this.header('/packageB/content/playRule')
			},
			getBox(){
				api.blindBox.index().then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						this.blindBoxData = res.data.data;
						this.goods_price = this.blindBoxData[0].price;
						this.totalBox = this.blindBoxData.length - 1;
					}
				}).catch(error => {
					console.log(error)
				})
			},
			changeBox(e){
				this.current = e.detail.current
				this.goods_price = this.blindBoxData[this.current].price;
			},
			playAuto(){
				this.audioStatus = !this.audioStatus;
				this.play()
			},
			detail(){
				this.header(`/pages/index/detail?id=${this.blindBoxData[this.current].id}`)
			},
			play(){
				if (this.audioStatus) {
					this.audio.play()
				} else {
					this.audio.pause();
				}
			},
			checkVersion(){
				let ua = uni.getSystemInfoSync().platform;
				if (/ios/i.test(ua)) {
					this.type = 'ios'
				} else if (/android/i.test(ua)) {
					this.type = 'android'
				}
				api.versions.check({refresh:1,type:this.type,version_no:this.version_no}).then(res => {
					if (res.code === 200) {
						this.network_flag = true
						this.versionData = res.data;
						if (res.data.status == 0) {
							uni.setStorageSync('update_app',0);
						} else {
							this.showVersion = true;
							this.$refs.update_app.open('center')
							uni.setStorageSync('update_app',1);
						}
					}
				}).catch(error => {
					console.log(error)
				})
			},
			getVersion(){
				plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
					this.version_no = wgtinfo.version
					this.checkVersion();
				})
			},
			updateApp(){
				this.mask = false;
				if (this.type == 'android') {
					this.androidUpdate();
					this.downStatus = true;
				} else if (this.type == 'ios') {
					 this.iosUpdate()
				}
			},
			androidUpdate(){
				let file_size = this.versionData.file_size
				
				var dtask = plus.downloader.createDownload( this.versionData.url, {}, function ( d, status ) {  
					// 下载完成  
					if ( status == 200 ) {   
						plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename),{},{},function(error){  
							this.show('安装成功');
						})
					} else {  
						 
						 this.show('安装失败');
					}    
				});  
				dtask.start();
				
				let timer = setInterval(() => {
						let percent = (dtask.downloadedSize / file_size).toFixed(2) // fileSize文件总大小，后端返回的
						this.percentVal = Math.floor(percent * 100) // 转成整数展示
						if (percent >= 1) { // 注意百分比，及时清除定时器即可
							clearInterval(timer)
							this.showVersion = false;
							this.$refs.pop.close()
						}
				}, 18)
			},
			iosUpdate(){
				plus.runtime.launchApplication({
					action: `${this.versionData.url}`
				}, function(e) {
					console.log('Open system default browser failed: ' + e.message);
				});
			},
		},
	}
</script>

<style lang="scss">
	@keyframes beat {
		0% {
			bottom: 15%;
		}
		100% {
			bottom: 5%;
		}
	}
	@keyframes animateBubble{
	 //  0% {
		// margin-top: 100vh;
	 //  }
	 //  100% {
		//   margin-top: -100%;
	 //  }
	 //  0% {
		//   margin-left: 0px;
	 //  }
	 //  100% {
		//   margin-left: 50px;
	 //  }
		0% {
			bottom:0;
			display: flex;
		}
		100% {
			bottom:600rpx;
			display: none;
		}
	}


	@keyframes sideWays{
	 0% {
		  left: 0px;
	  }

	  100% {
		  left: 250rpx;
	  }
	}
	.content {
		position: relative;
		overflow: hidden;
		width:100%;
		height:100vh;
		.bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height:100vh;
			z-index: -1;
		}
		.tabbar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width:100%;
			position: absolute;
			left: 0;
			top:120rpx;
			z-index:5;
			
			.tabbar_left {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.tool {
					width: 90rpx;
					margin: 0 20rpx;
				}
			}
			.tabbar_right {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.play,.back {
					width: 65rpx;
					height: 65rpx;
					margin-right: 40rpx;
				}
				.play {
					margin-right: 40rpx;
				}
			}
			
		}
		
		
		.box {
			width: 100%;
			height: 950rpx;
			display: flex;
			justify-content: flex-end;
			align-items: baseline;
			flex-direction: column;
			position: relative;
			.left{
				width:60rpx;
				position: absolute;
				left:60rpx;
				top:calc(60%);
				z-index:10;
			} 
			.right {
				width:60rpx;
				position: absolute;
				right:60rpx;
				top:calc(60%);
				z-index:10;
			}
			.try_play {
				position: absolute;
				width: 100rpx;
				top: 400rpx;
				right:30rpx;
				z-index: 10;
			}
			.swiper {
				width: 100%;
				height: 500rpx;
				z-index: 3;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 100rpx;
				position: relative;
				
				.swiper_item {
					display: flex;
					justify-content: center;
					align-items: flex-end;
					position: relative;
					// z-index: 5;
					transform-style: preserve-3d;
					.swiper_image {
						// width: 300rpx;
						height: 400rpx;
						position: absolute;
						animation-name: beat;
						// z-index: 6;
						/*动画名称*/
						animation-duration: 1s;
						/*设置秒数*/
						animation-timing-function: linear;
						/*速度曲线*/
						animation-iteration-count: infinite;
						/*播放次数*/
						animation-direction: alternate;
						/*逆向播放*/
						animation-play-state: running;
					}
				
					
					.boo {
						border-radius: 50%;
						box-shadow: 0 20rpx 30rpx rgb(58 81 112 / 10%), inset 0px   10rpx 30rpx 5rpx rgb(255 255 255 / 70%);
						position: absolute;
						width: 180rpx;
						height: 180rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						// , sideWays 4s ease-in-out infinite alternate
						animation:animateBubble 4s linear infinite;
						&::after {
							background: radial-gradient(ellipse at center, rgb(203 238 255 / 30%) 0%, rgba(255, 255, 255, 0) 70%);
							border-radius: 50%;
							box-shadow: inset 0 20rpx 30rpx rgba(255, 255, 255, 0.3);
							content: "";
							position: absolute;
							left: 5rpx;
							width: 150rpx;
							height: 150rpx;
						}
						
						.prize_image {
							width: 150rpx;
							height: 150rpx;
						}
					}
					
				}
			}
		}
		.box2 {
			width: 100%;
			margin-top: 50rpx;
			.swiper {
				width: 100%;
				.swiper_item {
					display: flex;
					justify-content: center;
					.swiper_item_box {
						display: flex;
						justify-content: flex-end;
						flex-direction: column;
						align-items: center;
						width: 180rpx;
						border-radius: 10rpx;
						position: relative;
						height: 280rpx;
						.swiper_item_box_bg {
							width: 180rpx;
							height: 280rpx;
							position: absolute;
							z-index: 0;
							top: 0;
							right: 0;
						}
						.swiper_image {
							position: absolute;
							top: 0;
							left: 10rpx;
							width: 160rpx;
							z-index: 2;
							border: 1rpx solid transparent;
						}
						.swiper_item_name{
							font-size: 30rpx;
							margin-bottom: 60rpx;
							z-index:4;
							color: #A361F6;
						}
						&.active {
							height: 300rpx;
							width:200rpx;
							.swiper_item_name {
								color: #A361F6;
								font-weight: bold;
								font-size: 36rpx;
							}
							.swiper_item_box_bg {
								width: 200rpx;
								height: 300rpx;
							}
							.swiper_image {
								
								width: 180rpx;
							}
						}
					}
					
				}
			}
		}
		.prize_box {
			width: 600rpx;
			height:200rpx;
			position: absolute;
			top:calc(50%);
			left:75rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			flex-direction: column;
			.box_prize {
				display: flex;
				align-items: baseline;
				font-weight: bold;
				font-size: 26rpx;
				color: #383838;
				margin-bottom: 10rpx;
				.box_prize_num {
					font-size: 46rpx;
				}
			}
		}
		.open_box {
			width: 100%;
			margin: 0 auto 0 auto;
			height: 200rpx;
			align-items: flex-start;
			display: flex;
			justify-content: center;
			.open_image {
				height: 180rpx;
			}
		}
		.coupon_popup {
			border: 1rpx solid red;
			.coupon_popup_box {
				position: relative;
				display: flex;
				flex-direction: column;
				width: 600rpx;
				height: 900rpx;
				// border: 1rpx solid red;
				.pop_image {
					width: 100%;
					position: absolute;
					left: 0;
					top:0;
					z-index:-2;
				}
				.close_pop {
					width: 50rpx;
					height: 50rpx;
					position: absolute;
					top: 100rpx;
					right: 30rpx;
					z-index: 5;
				}
				.coupon_popup_header {
					position: absolute;
					top: 240rpx;
					left:calc(50% - 150rpx);
					font-size: 24rpx;
					width: 300rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					border-radius: 20rpx;
					background: linear-gradient(to bottom, #AF9CFF, #EFCBFF);
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					color: #3D2E7B;
					.coupon_popup_header_icon {
						width: 25rpx;
						height: 25rpx;
						margin-right:10rpx; 
					}
					.coupon_popup_header_title {
						display: flex;
						align-items: center;
						.coupon_popup_header_remark {
							margin-left:10rpx;
						}
					}
				}
				
				.coupon_popup_content {
					display: flex;
					flex-direction: column;
					position: absolute;
					top: 300rpx;
					left:50rpx;
					height: 480rpx;
					overflow: scroll;
					.coupon_popup_item {
						display: flex;
						justify-content: space-between;
						width:500rpx;
						margin-bottom:20rpx;
						height: 130rpx;
						position: relative;
						.coupon_popup_item_bg {
							width:500rpx;
							height: 130rpx;
							position: absolute;
							width: 100%;
							height: 100%;
							top:0;
							left:0;
							z-index:-1;
						}
						.coupon_popup_left {
							display: flex;
							flex-direction: column;
							height: 130rpx;
							justify-content: space-around;
							margin-left:20rpx;
							color: #3D2E7B;
							.coupon_popup_name {
								font-size: 36rpx;
							}
							.coupon_popup_remark {
								font-size: 28rpx;
							}
						}
						.coupon_popup_right {
							display: flex;
							flex-direction: column;
							position: relative;
							height: 130rpx;
							justify-content: center;
							margin-right: 50rpx;
							.coupon_popup_amount_box {
								display: flex;
								align-items: baseline;
								font-size: 24rpx;
								margin-bottom: 20rpx;
								.coupon_popup_amount {
									font-size: 40rpx;
									font-weight: bold;
								}
							}
							
							.coupon_popup_min_amount {
								font-size: 24rpx;
							}
							
						}
					}
				}
				
				.coupon_btn {
					width: 400rpx;
					position: absolute;
					bottom: 10rpx;
					left:100rpx;
				}
			}
		}
		
		.app_popup {
			.pop_box {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width:600rpx;
				height: 600rpx;
				border-radius: 10rpx;
				position: relative;
				.pop_bg {
					width: 100%;
					position: absolute;
					left: 0;
					top:0;
					z-index:-1;
				}
				.pop_version {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-top: 100rpx;
					margin-left:60rpx;
					.pop_header{
						color:#fff;
					}
					.pop_content {
						// padding: 0 20rpx;
						margin-top: 120rpx;
					}
				}
				
				
				.rate {
					width: 550rpx;
					margin: 0 auto;
					align-items: center;
					display: flex;
					.rate_image {
						width: 500rpx;
						margin-right: 10rpx;
					}
				}
				
				.down_btn_group {
					display: flex;
					justify-content: space-around;
					align-items: center;
					.down_btn {
						width: 200rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						font-size: 24rpx;
						border-radius: 10rpx;
						&.cancel{
							background-color: #ccc;
							color: #999;
						}
						&.down {
							background-color: #A361F6;
							color: #fff;
						}
					}
				}
			}
		}
	
	}
</style>